import { FC, memo } from "react";
import classNames from "classnames";

import error404 from "@/assets/images/404.svg";
import { IBaseComponentProps } from "@/types/component";

import "./index.scss";

export interface IError404Props extends IBaseComponentProps {}

const prefixcls = "error-404";

const Error404: FC<IError404Props> = memo((props) => {
  const { className } = props;
  return (
    <div className={classNames(prefixcls, className)}>
      <div className="page-container">
        <div className="pic-404">
          <img className="pic-404__parent" src={error404} alt="404" />
        </div>
        <div className="bullshit">
          <div className="bullshit__oops">OOPS！</div>
          <div className="bullshit__info">该页面无法访问。</div>
          <div className="bullshit__headline">抱歉，您访问的页面不存在。</div>
          <div className="bullshit__info">
            请确认您输入的网址是否正确，或者点击下方按钮返回首页。
          </div>
          <a href="#" className="bullshit__return-home">
            返回首页
          </a>
        </div>
      </div>
    </div>
  );
});

export default Error404;
